<template>
  <div>
    <el-row>
      <el-button-group>
        <el-button @click="resetDateFilter">新增</el-button>
        <el-button @click="clearFilter">新增</el-button>
      </el-button-group>
    </el-row>
    <br>
    <el-row>
      <el-table
        :data="tableData"
        border>
        <el-table-column
          prop="id"
          label="id">
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题">
        </el-table-column>
        <el-table-column
          prop="path"
          label="路由地址">
        </el-table-column>
        <el-table-column
          prop="parent"
          label="上级菜单">
        </el-table-column>
        <el-table-column
          prop="category"
          label="所属分类">
        </el-table-column>
        <el-table-column
          prop="icon"
          label="图标">
          <template slot-scope="scope">
            <i :class="scope.row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>

</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        tableData: [{
          id: 1,
          title: '菜单列表',
          path: '/menus',
          parent: '导航栏管理',
          category: '系统管理',
          icon: 'el-icon-plus'
        }]
      }
    },
    methods: {
      handleDelete(index, row) {
        this.$confirm('您确认删除吗', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          center: true,
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

    }

  }
</script>

<style scoped>

</style>
